<script setup lang="ts">
import {
  applyPureReactInVue
} from 'veaury';
import {
  Editor
} from 'amis-editor';

import 'amis-editor-core/lib/style.css';
import 'amis/lib/themes/antd.css';
import 'amis/sdk/helper.css';
import "amis/lib/themes/default.css";
import "amis/sdk/iconfont.css";
import { reactive } from 'vue';
const amisEditor = applyPureReactInVue(Editor)
const pageData=reactive({
  isPreview: false,
  isMobile: false,
  schema: {} as any,
  amisEnv: {
    alert: alert
  } as any,
  isPreviewName: '预览',
  isMobileName: '手机'
})
function setSchema(e: any) {
  pageData.schema = e || {}
  console.log(pageData.schema)
  // localStorage.setItem('formEditorData', JSON.stringify(schema.value))
}


function saveBtn() {
  console.log("saveData.....", pageData.schema)
}
function previewBtn() {
  if (pageData.isPreview == false) {
    pageData.isPreview = true
    pageData.isPreviewName = '编辑'
  } else {
    pageData.isPreview = false
    pageData.isPreviewName = '预览'
  }
}
function moblieBtn() {
  if (pageData.isMobile == false) {
    pageData.isMobile = true
    pageData.isMobileName = 'PC'
  } else {
    pageData.isMobile = false
    pageData.isMobileName = '手机'
  }
}
</script>

<template>
  <div style="display: flex;justify-content: center;align-items: center;height: 44px;">
    <button @click="previewBtn">{{pageData.isPreviewName}}</button>
    <button @click="moblieBtn">{{pageData.isMobileName}}</button>
    <button @click="saveBtn">保存</button>
  </div>

  <amisEditor style="border-top: 1px solid #f0f0f0;" theme="antd" className="is-fixed" :isMobile="pageData.isMobile"
    :preview="pageData.isPreview" :value="pageData.schema" :amisEnv="pageData.amisEnv" :onChange="setSchema" />
</template>
 
<style lang="scss" scoped>
:deep(.ae-Preview .ae-Preview-body.is-pc) {
  width: auto;
}

:deep(.is-fixed) {
  top: 44px;
  border-top: 1px solid #f0f0f0;
}
</style>
